precision highp float;

varying vec2 vUv;

void main() {
  // uv是一个二维向量,每个分量都是0-1的浮点数,这样可以组成颜色
  // gl_FragColor = vec4(vUv, 1.0, 1.0);
  // 利用变量实现渐变

  // 1. 从左到右
  // float colorFator = vUv.x; 

  // 2. 从上到下
  // float colorFator = vUv.y; 

  // 3. 短距离(部分位置)渐变,这里是前10％渐变色,后面全白,大于1就是1.0
  // float colorFator = vUv.x * 10.0; 

  // 4. 分段渐变,使用求余数(模)即可
  // float colorFator = mod(vUv.x * 10.0, 1.0); 

  // 5. 斑马纹,step(edge, x)是边界函数,edge是边界值,小于边界返回0.0,大于返回1.0
  // float colorFator = step(0.5, mod(vUv.x * 10.0, 1.0)); 

  // -------接下来运算相关生成的图像,文字不好描述,应当根据页面效果理解-----

  // 6. x轴y轴斑马纹相加, 即网,因为step返回值为1或0,颜色分量大于1算作1,所以相加相当于或运算,图像为两者为真的区域皆存在
  // float colorFator = step(0.85, mod(vUv.x * 10.0, 1.0)) + step(0.85, mod(vUv.y * 10.0, 1.0)); 

  // 7. x轴y轴斑马纹相减, 即反着的网,因为step返回值为1或0,颜色分量小于0算作0,所以相减相当于运算,图像为被减数区域为真的区域裁去减数为真的区域
  // float colorFator = step(0.85, mod(vUv.x * 10.0, 1.0)) - step(0.85, mod(vUv.y * 10.0, 1.0)); 

  // 8. x轴y轴斑马纹相乘, 相当于与运算,图像是两者都为真的区域
  // float colorFator = step(0.85, mod(vUv.x * 10.0, 1.0)) * step(0.85, mod(vUv.y * 10.0, 1.0)); 

  // 9. 相乘之后在相加,绘制马里奥墙面效果
  // float colorFator = step(0.4, mod(vUv.x * 10.0, 1.0)) * step(0.8, mod(vUv.y * 10.0, 1.0)) + step(0.4, mod(vUv.y * 10.0, 1.0)) * step(0.8, mod(vUv.x * 10.0, 1.0)); 

  // 10. 取绝对值获取镜像效果
  float colorFator = abs(vUv.x - 0.5);

  gl_FragColor = vec4(colorFator, colorFator, 1.0, 1.0);

  // 因为所获取值都是0或1,也可以用来设置透明度,然后还能上颜色,不过要设置透明,必须在材质中开启透明效果,详细看shader.js 25行
  // gl_FragColor = vec4(vUv, 1.0, colorFator); 

}